<template>
    <div class="home-cate" @mouseleave="cateid=null">
        <!-- 左侧分类 -->
        <ul class="menu" v-if="brandList">
            <li :class="{active:cateid===item.id}" v-for="item in brandList" :key="item.id" @mouseenter="getCateId(item.id)">
                <a href="#">{{item.name}}</a>
                <template v-if="item.children">
                    <a href="#" v-for="item1 in item.children" :key="item1.id">{{item1.name}}</a>
                </template>
                <span v-else>
                    <sy-Skeleton width="60px" height="18px" style="margin-right:5px" bg="rgba(255,255,255,0.2)" ></sy-Skeleton>
                    <sy-Skeleton  width="50px" height="18px" bg="rgba(255,255,255,0.2)"></sy-Skeleton>
                </span>
            </li>
        </ul>

        <!-- 右侧弹层 -->
        <div class="layer" v-if="curGoodsArr">
            <h4>{{curGoodsArr.id==='brand'?'品牌':'分类'}}推荐 <small>根据您的购买或浏览记录推荐</small></h4>
            <ul v-if="curGoodsArr&&curGoodsArr.goods&&curGoodsArr.goods.length">
                <li v-for="item in curGoodsArr.goods " :key="item.id" >
                    <router-link to="/" class="layer-item">
                        <img v-lazy="item.picture" alt="">
                        <div class="info">
                            <p class="name ellipsis-2">{{item.name}}</p>
                            <p class="desc ellipsis">{{item.desc}}</p>
                            <p class="price"> <i>￥</i>{{item.price}}</p>
                        </div>
                    </router-link>
                </li>
            </ul>
            <!-- 品牌弹层 -->
            <ul v-if="curGoodsArr && curGoodsArr.brands && curGoodsArr.brands.length">
                <li class="brand" v-for="item in curGoodsArr.brands" :key="item.id">
                    <RouterLink to="/" >
                    <div class="brand-a">
                        <img v-lazy="item.picture" alt="">
                        <div class="info">
                            <p class="place"><i class="iconfont icon-dingwei"></i>{{item.place}}</p>
                            <p class="name ellipsis">{{item.name}}</p>
                            <p class="desc ellipsis-2">{{item.desc}}</p>
                        </div>
                        </div>
                    </RouterLink>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { useStore } from 'vuex'
import { reactive, computed, ref } from 'vue'
import { getSuggestGoodsAPI } from '@/api/category'

export default {
  setup () {
    // 左侧分类列表的最后一项，品牌推荐
    const brand = reactive({
      id: 'brand',
      name: '品牌',
      children: [{ id: 'brand-children', name: '品牌推荐' }],
      brands: []
    })
    // 获取品牌数据
    getSuggestGoodsAPI().then(data => {
      brand.brands = data.result
    //   console.log(data)
    })

    // 获取左侧列表的分类，每个一级分类下获取二级分类的前两个
    const store = useStore()
    const brandList = computed(() => {
      const list = store.state.category.list.map(item => {
        return {
          id: item.id,
          name: item.name,
          children: item.children && item.children.slice(0, 2),
          goods: item.goods
        }
      })
      list.push(brand)
      return list
    })
    // console.log(brandList)

    // 声明分类id ， 当鼠标经过左侧分类时获取id，根据id渲染弹出层
    const cateid = ref(null)
    const getCateId = (id) => {
      cateid.value = id
      console.log(cateid.value)
      console.log(curGoodsArr.value)
    }
    // 鼠标经过，获取弹层信息并显示弹层
    const curGoodsArr = computed(() => {
      return brandList.value.find(item => item.id === cateid.value)
    })

    return {
      // 品牌的列表
      brandList,
      // 当前鼠标经过的分类id（一级）
      cateid,
      // 当前鼠标经过的分类id下的商品
      curGoodsArr,
      getCateId
    }
  }
}
</script>

<style lang="less">
.home-cate{
    position: absolute;
    background:rgba(0,0,0,0.8);
    width: 250px;
    height: 500px;
    z-index: 99;
    .menu{
        li{
            padding-left: 40px;
            height: 50px;
            line-height: 50px;
            &:hover,&.active{
                background-color: @themeColor;
            }
            a{
                margin-right: 4px;
                color:#fff;
                &:first-child{
                    font-size: 16px;
                }

            }
        }
    }

    // 右侧弹出层部分
    .layer{
        display: none;
        width: 990px;
        height: 500px;
        position: absolute;
        top: 0;
        left: 250px;
        padding: 0 15px;
        background: rgba(255,255,255,0.2);
        h4{
            font-size: 20px;
            line-height: 80px;
            font-weight: normal;
            color: #666;
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            li{
                width: 310px;
                height: 120px;
                background-color: #fff;
                margin-right: 15px;
                margin-bottom: 15px;
                border: 1px solid #eee;
                border-radius: 4px;
                &:hover{
                    background: rgba(0,255,255,0.1);
                }
                &:nth-child(3n){
                    margin-right: 0;
                }
                .layer-item{
                    display: flex;
                    align-items: center;
                    padding: 10px;
                    img{
                        width: 95px;
                        height: 95px;
                    }
                    .info{
                        padding-left: 10px;
                        line-height: 24px;
                        width: 190px;
                        .name{
                            font-size: 16px;
                            color: #666;
                        }
                        .desc{
                            color:#999;
                        }
                        .price{
                            font-size: 22px;
                            color:@priceColor;
                            i{
                                font-size: 16px;
                            }
                        }
                    }
                }
            }
        }
        li.brand {
            height: 180px;
            .brand-a{
                display: flex;
                align-items: flex-start;
                img {
                    margin: 10px;
                    width: 120px;
                    height: 160px;
                }
                .info {
                    p {
                        margin-top: 8px;
                    }
                    .name{
                            color: #666;
                            font-size: 16px;
                    }
                    .place {
                        color: #999;
                    }
                }
            }
            &:hover{
                background: rgba(0,255,255,0.1);
            }
      }
    }
    &:hover{
        .layer{
            display: block;
        }
    }
}
.sy-skeleton {
  animation: fade 1s linear infinite alternate;
}
@keyframes fade {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}
</style>
